const gulp = require("gulp")
const sass = require("gulp-sass")
const browserSync = require("browser-sync").create();
const fileinclude = require("gulp-file-include");
const del = require("del");
const autoprefixer = require("gulp-autoprefixer");
const group_media = require("gulp-group-css-media-queries");
const clean_css = require("gulp-clean-css");
const rename = require("gulp-rename");
const uglifyes = require("gulp-uglify-es").default;
const imgmin = require("gulp-imagemin");
const webp = require("gulp-webp");


const project_folder = "dist";
const source_folder = "#src";
const path = {
    build: {
        html: project_folder+"/",
        css: project_folder+"/css",
        js: project_folder+"/js",
        img: project_folder+"/img",
        fonts: project_folder+"/fonts"
    },
    src:{
        html: [source_folder+"/*.html", "!"+source_folder+"/templates/_*.html"],
        scss: source_folder+"/scss/style.scss",
        js: source_folder+"/js/script.js",
        img: source_folder+"/img/**/*.{jpeg,png,svg,ico,git,webp}",
        fonts: source_folder+"/fonts/**/*.ttf"
    },
    watch:{
        html: source_folder+"/**/*.html",
        css: source_folder+"/scss/**/*.scss",
        js: source_folder+"/js/**/*.js",
        img: source_folder+"/img/**/*.{jpeg,jpg,png,svg,ico,git,webp}",
        fonts: source_folder+"/fonts/**/*.ttf"
    },
    clean: "./"+project_folder+"/"
}

function browsersync() {
    browserSync.init({
        server: {baseDir: "./"+project_folder+"/"},
        port: 8848,
        notify: true
    })
}

function html() {
    return gulp.src(path.src.html)
        .pipe(fileinclude())
        .pipe(gulp.dest(path.build.html))
        .pipe(browserSync.stream())
}

function scss() {
    return gulp.src(path.src.scss)
        .pipe(sass({
            includePaths: [path.src.scss],
            outputStyle: "expanded"
            }).on('error', sass.logError)
        )
        .pipe(group_media())
        .pipe(autoprefixer({
            overrideBrowserslist: ["last 5 versions"],
            cascade: true
        }))
        .pipe(clean_css())
        .pipe(gulp.dest(path.build.css))
        .pipe(rename({ extname: "-min.css" }))
        .pipe(gulp.dest(path.build.css))
        .pipe(browserSync.stream())
}

function js() {
    return gulp.src(path.src.js)
        .pipe(fileinclude())
        .pipe(gulp.dest(path.build.js))
        .pipe(uglifyes())
        .pipe(rename({ extname: "-min.js"}))
        .pipe(gulp.dest(path.build.js))
        .pipe(browserSync.stream())
}

function images() {
    return gulp.src(path.src.img)
        .pipe(webp({ quality: 70 }))
        .pipe(imgmin({ 
                progressive: true,
                svgoPlugins: [{ removeViewBox: false }],
                interlaced: true,
                optimizationLevel: 3
        }))
        .pipe(gulp.dest(path.build.img))
        .pipe(browserSync.stream())
}

function watcher() {
    gulp.watch(path.watch.html, html);
    gulp.watch(path.watch.css, scss);
    gulp.watch(path.watch.js, js);
    gulp.watch(path.watch.img, images);
}

function clean() {
    return del(path.clean);
}

let build = gulp.series(clean, gulp.parallel(html, scss, js, images));
let watch = gulp.parallel(build, watcher, browsersync);


exports.html = html;
exports.scss = scss;
exports.js = js;
exports.images = images;
exports.build = build;
exports.watch = watch;
exports.default = watch;